<template>
  <div class="realTime" style="padding: 0; position: relative">
    <!--地图 B-->
    <Map ref="baseMap" v-on:ysf="acceptysy"></Map>
    <!--地图 E-->

    <div class="list"
      style="width: 25%;height: calc(100% - 0.32rem);position: absolute;top: 0.16rem;right: 0.16rem;z-index: 99;">
      <div class="videoList" style="display: block">
        <div class="videoList_title">
          <!--<span class='icon iconfont icon-chazhaobiaodanliebiao'></span>-->
          <span>设备名称</span>
        </div>
        <div class="videoList_content">
          <div class="TDlist">
            <table>
              <thead>
                <tr>
                  <th>设备名称</th>
                  <th>布设地点</th>
                  <th>所属管理站</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(t, i) in tongdao" :class="i + 'TD'" @click="openplayer(t, i)">
                  <td>{{ t.name }}</td>
                  <td>{{ t.location }}</td>
                  <td>{{ t.siteName }}</td>
                  <td @click.stop="xig(t)"> <span>修改</span> </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!--分页 B-->
      <el-pagination id="change_color" @current-change="handleCurrentChange" background :page-size="page.size"
        layout="total, prev, pager, next" :total="page.totalElements">
      </el-pagination>
      <!--分页 E-->
    </div>

    <div class="ysfPop" v-if="isYsf">
      <div class="ysfClose">
        <img src="/static/img/icon/close.png" alt="" @click="(isYsf = false), (player = null)" />
      </div>
      <div class="videoWindow" id="playWnd" style="height: 80%; overflow: hidden"></div>
    </div>


    <!--编辑框 B-->
    <div class="masklayer" v-show="iseditbox">
      <div class="editbox">
        <div class="editboxTitle">
          <span>修改设备</span>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="布设地点">
            <el-input v-model="ruleForm.xlh"></el-input>
          </el-form-item>
          <el-form-item label="所属管理站">
            <el-input v-model="ruleForm.tdh"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="lon">
            <el-input v-model="ruleForm.lon"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="ruleForm.lat"></el-input>
          </el-form-item>
          <el-form-item label="海拔" prop="altitude">
            <el-input v-model="ruleForm.altitude"></el-input>
          </el-form-item>
          <el-form-item label="运行状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择运行状态" style="width: 100%;">
              <el-option label="正常" value="正常"></el-option>
              <el-option label="维修中" value="维修中"></el-option>
              <el-option label="损坏" value="损坏"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部署时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input v-model="ruleForm.deviceNumber"></el-input>
          </el-form-item>
          <el-form-item label="设备型号">
            <el-input v-model="ruleForm.deviceModel"></el-input>
          </el-form-item>
          <el-form-item label="厂商名称">
            <el-input v-model="ruleForm.manufacture"></el-input>
          </el-form-item>

        </el-form>
        <div class="bottombtn">
          <span class="cancelf" @click="resetForm('ruleForm')" style="margin-right: .2rem;">取消</span>
          <span class="greenf" @click="submitForm('ruleForm')">确定</span>
        </div>
      </div>
    </div>
    <!--编辑框 E-->

  </div>
</template>
<script>
import http from "../../utils/http";
import api from "../../utils/api";
import Map from '../Map.vue'

export default {
  components: { Map },
  data() {
    return {
      areaId: "",
      form: {},
      tongdao: [],
      page: {},
      accessToken: "",
      channelNo: "", //通道号
      //        deviceSerial: 'D55908472',//序列号
      deviceSerial: "", //序列号
      direction: "8",
      speed: "2",
      yanzhengma: "",
      SRC: "",
      clickId: "",
      pageSize: "9",
      pageNum: 0,
      showList: true,
      name: "",
      num: "",
      isYsf: false,
      player: null,
      iseditbox: false,
      ruleForm: {
        id: "",
        name: '',
        xlh: "",
        tdh: "",
        lon: '',
        lat: '',
        altitude: '',
        installTime: "",
        date: "",
        status: "",
        deviceNumber: "",
        deviceModel: "",
        manufacture: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        lon: [
          { required: true, message: '请输入经度', trigger: 'blur' }
        ],
        lat: [
          { required: true, message: '请输入经度', trigger: 'blur' }
        ],
        altitude: [
          { required: true, message: '请输入海拔', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择运行状态', trigger: 'change' }
        ],
      },
    };
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.getysy();
  },
  mounted() {
    // this.kongzhi()
  },
  methods: {

    xig(d) {
      this.ruleForm.id = d.id;
      this.ruleForm.xlh = d.location;
      this.ruleForm.tdh = d.siteName;
      this.ruleForm.name = d.name;
      this.ruleForm.lon = d.lon;
      this.ruleForm.lat = d.lat;
      this.ruleForm.altitude = d.altitude;
      if (d.installTime == null || d.installTime == '') {
        this.ruleForm.date = '';
      } else {
        this.ruleForm.date = new Date(d.installTime);
      }

      this.ruleForm.status = d.status;
      this.ruleForm.deviceNumber = d.deviceNumber;
      this.ruleForm.deviceModel = d.deviceModel;
      this.ruleForm.manufacture = d.manufacture;
      this.iseditbox = true;
    },
    trandate(daterange) {
      let t = '';
      if (daterange != null || daterange != '') {
        var year = daterange.getFullYear();
        var month = daterange.getMonth() + 1;
        var date = daterange.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        t = year + "-" + month + "-" + date;
      }

      return t;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let then = this, obj = {
            id: this.ruleForm.id,
            location: this.ruleForm.xlh,
            siteName: this.ruleForm.tdh,
            name: this.ruleForm.name,
            lon: this.ruleForm.lon,
            lat: this.ruleForm.lat,
            altitude: this.ruleForm.altitude,
            installTime: this.trandate(this.ruleForm.date),
            status: this.ruleForm.status,
            deviceNumber: this.ruleForm.deviceNumber,
            deviceModel: this.ruleForm.deviceModel,
            manufacture: this.ruleForm.manufacture
          };
          (async function () {
            let res = await http.post(api.updateDeviceName, obj)
            if (res.data.code == '200') {
              then.success('修改成功')
              then.iseditbox = false;
              then.getysy();
            } else {
              then.warn(res.data.message)
            }
          })()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    success(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'success',
      });
    },
    warn(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'warning'
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.iseditbox = false
    },
    //-----
    openplayer(e, i) {
      let _then = this;
      let promise = new Promise(function (resolve, reject) {
        _then.isYsf = true;
        resolve();
      });
      promise.then((res) => {
        _then.lookTD(e, i);
      });
    },
    acceptysy(data) {
      let _then = this;
      let promise = new Promise(function (resolve, reject) {
        _then.isYsf = true;
        resolve();
      });
      promise.then((res) => {
        _then.lookTD(data.item, data.index);
      });
    },
    getysy() {
      let vm = this;
      vm.$axios
        .get(api.accessInfo + "?areaId=" + this.areaId)
        .then(function (response) {
          let xu = [],
            yan = [];
          if (response.data.code == 200) {
            for (let k in response.data.data.codeMap) {
              xu.push(k);
              yan.push(response.data.data.codeMap[k]);
            }
            vm.accessToken = response.data.data.token;
            vm.yanzhengma = yan;
            vm.deviceSerial = xu;
            vm.getPage();
          } else {
            vm.$message({
              message: response.data.message,
              type: "error",
              duration: "1000",
            });
          }
        })
        .catch(function (error) { });
    },
    getPage() {
      var vm = this;
      (async function () {
        let res = await http.get(
          api.page +
          "?areaId=" +
          vm.areaId +
          "&pageNum=" +
          vm.pageNum +
          "&pageSize=" +
          vm.pageSize
        );
        if (res.data.code == 200) {
          vm.tongdao = res.data.data.content;
          vm.page = res.data.data;
          var arr = vm.tongdao[0].uniqueInfo.split("-");
          vm.deviceSerial = arr[0];
          vm.channelNo = arr[1];
          vm.name = vm.tongdao[0].name;
          vm.num = vm.channelNo;
          vm.SRC =
            "https://open.ys7.com/ezopen/h5/iframe?url=ezopen://" +
            vm.yanzhengma +
            "@open.ys7.com/" +
            vm.deviceSerial +
            "/" +
            vm.channelNo +
            ".hd.live" +
            "&autoplay=1" +
            "&accessToken=" +
            vm.accessToken;

          let point = [];
          res.data.data.content.forEach((e, x) => {
            let z = {
              id: e.id,
              name: e.name,
              // name: "",
              borderColor: "",
              fillColor: "",
              iconSrc:
                "../../static/img/map/shipinjiankong_anchor_bottom_center.png",
              data: {
                type: '森林防火',
                item: e,
                index: x,
              },
              geojson: { coordinates: [e.lon, e.lat], type: "Point" },
            };

            point.push(z);
          });

          if (point.length > 0) {
            vm.$refs.baseMap.previewshape(point, "ysyjkd");
          }
        } else {
          vm.$message({
            message: res.data.message,
            type: "error",
            duration: "1000",
          });
        }
      })();
    },
    lookTD(e, i) {
      let yzm = this.yanzhengma,
        token = this.accessToken,
        arr = e.uniqueInfo.split("-"),
        xlh = arr[0],
        tdh = arr[1];
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: "playWnd",
        accessToken: token,
        url:
          "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        width: "100%",
        height: "100%",
      });
      this.player.stop();
      // 切换为直播
      this.player.play();
    },
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.getPage();
    },
  },
  beforeRouteLeave(to, from, next) {
    this.player = null;
    next();
  },
};
</script>
<style scoped>
@import "../../../static/css/realTime/realTime.css";
</style>
<style>
.TDlist .el-collapse-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 48px;
  line-height: 48px;
  background-color: #fff;
  color: #303133;
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
  font-size: 18px;
  font-weight: 500;
  -webkit-transition: border-bottom-color 0.3s;
  transition: border-bottom-color 0.3s;
  outline: 0;
}

.TDbackground {
  background-color: #00cc46;
  color: #fff;
  /*border-left: 0.05rem solid #1FB456;*/
}

.borColor {
  border: 0.03rem solid #00cc46 !important;
}

/*分页 B*/
#change_color.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #00cc46 !important;
  color: #fff;
}

iframe {
  height: 100% !important;
}
</style>
